<!doctype html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${title}">默认的标题</title>
</head>

<body>
    <script src="./js/vue.js"></script>
    <script src="./js/axios.js"></script>
    <script src="./js/request.js"></script>
    <script src="./js/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="./js/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="./css/login.css">

    <div id="article">
        <div class="block" style="width: 400px">
            <el-carousel height="300px">
                <el-carousel-item v-for="item in images.length" :key="item">
                    <img :src="images[item - 1]" style="width: 400px;height: 300px" @click="bigImg(images[item - 1])">
                </el-carousel-item>
            </el-carousel>
        </div>
        <h1 th:text="${title}"></h1>
        <p th:text="${context}"></p>
    </div>



    <script type="text/javascript" th:inline="javascript">
        //取出images对象
        const images = [[${images}]];
        const articleDetail = [[${articleDetail}]]
    </script>
    <script>
        new Vue({
            el: '#article',
            data: {
                pictureImg:false,
                pictureSrc:'',
                images,
                articleDetail,
                commentGetVo:{
                    articleId:0,
                    page:0,
                    size:20
                },
                comments:[]
            },
            methods:{
                bigImg(src){
                    window.open(src);
                },
                // 找到当前文章的所有评论
                findComment(articleDetail){
                    this.commentGetVo.articleId = articleDetail.id;
                    request('get','/im/comment/get/all',this.commentGetVo)
                        .then(res=>{
                            if (res.data.code === 200){
                                this.comments = res.data.data;
                            }else {
                                this.$message.error(res.data.message);
                            }
                        })
                }
            }
        })
    </script>
    <style>
        .el-carousel__item h3 {
            color: #475669;
            font-size: 14px;
            opacity: 0.75;
            line-height: 150px;
            margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }
    </style>

</body>

</html>